<template>
	<view>
		<view class="page-body">
			<view class="page-section page-section-gap">
				
				<map style="width: 100%; height: 1500rpx" :key="mapKey" @markertap="punctuat" :scale="12" :latitude="latitude" :longitude="longitude" :markers="markers"></map>
			</view>
		</view>
		<view class="navigat">

		</view>
		<view class="tu">
			<view class="lef">
				<image class="img" :src="obj.pic" mode=""></image>
			</view>
			<view class="rig">
				<view class="name">{{obj.name}}</view>
				<view class="address">{{obj.address}}</view>
				<view class="distance">距您{{obj.juli}}</view>
				<view class="nav" @click="goto">导航→</view>
			</view>
		</view>
		<view class="map" @click="goMap">
			<image class="mapImg" src="../../static/liebiao.png" mode=""></image>
			<view class="">列表</view>
		</view>
	</view>
</template>

<script>
import Vue from 'vue';
export default {
	data() {
		return {
			id: 0, // 使用 marker点击事件 需要填写id
			title: 'map',
			latitude: "30.66",
			longitude: "104.1",
			mapKey: 0,
			markers: [
				{
					id: 6,
					title: '钩钩果',
					latitude: "30.68",
					longitude: "104.08",
					// label:'你好',
					address: '成都市成华区',
					distance: '245',
					iconPath: '../../static/weizhi.png'
				}
			],
			obj:{},

			addrDel: {}
		};
	},
	onLoad(opt) {
		// this.getLocat()
		// this.getlist()
		let that =this
		that.latitude = opt.lat
		that.longitude = opt.lon
		// this.getMap();
		that.$api.post('index/getlist', { pagenum: 1, pernum: 99999, latitude: that.latitude, longitude: that.longitude }).then((res) => {
			const newArr = res.data.map(({ id, pic, latitude, longitude, address, juli, name }) => ({
				id:Number(id),
				pic,
				latitude:Number(latitude),
				longitude:Number(longitude),
				address,
				juli,
				name,
				iconPath: "../../static/weizhi.png", // 设置图标路径
				width: 10, // 设置图标宽度
				height: 14 // 设置图标高度
			}));
			setTimeout(()=>{
				that.markers = [...newArr];
				that.markers.forEach((item,index) =>{
					if(index == 0){
						that.obj = item
					}
				})
				console.log('markers111',that.markers)
			},500)
			

		
		});
		
		console.log('opt111', opt,that.latitude,that.longitude,that.markers);
	},
	onShow(){
		// this.getMap()
	},
	
	methods: {
		// 去列表
		goMap() {
			uni.switchTab({
				url: '/pages/tabs/index'
			});
		},
		// 导航
		goto() {
			uni.navigateTo({
				// url: '/pages/newPages/checkLocation?lat=' + this.obj.latitude + "&lon=" + this.obj.longitude
				url: '/pages/newPages/checkLocation?obj=' + encodeURIComponent(JSON.stringify(this.obj))
			});
		},
		punctuat(e) {
			//点击标点
			
			this.markers.forEach((item,index) =>{
				if(e.detail.markerId == item.id){
					this.obj = item
				}
			})
			console.log('点击标点234', e,this.obj);
		},
		getFeed() {
			//获取地图上的钓点信息
			this.$api
				.get('/api/front/index/map/feed', {
					id: 2
				})
				.then((res) => {
					console.log('999', res);
				});
		},

		// 获取列表定点
		// 获取列表数据
		getlist() {
			let that = this;
			that.$api.post('index/getlist', { pagenum: 1, pernum: 99999, latitude: that.latitude, longitude: that.longitude }).then((res) => {
				const newArr = res.data.map(({ id, pic, latitude, longitude, address, juli, name }) => ({
					id,
					pic,
					latitude,
					longitude,
					address,
					juli,
					name,
					iconPath: pic, // 设置图标路径
					width: 24, // 设置图标宽度
					height: 24 // 设置图标高度
				}));
				that.markers = newArr;
				console.log('地图点', newArr, that.markers);
			});
		},
		getMap() {
			let that = this;

			that.$api.post('index/getlist', { pagenum: 1, pernum: 99999, latitude: that.latitude, longitude: that.longitude }).then((res) => {
				const newArr = res.data.map(({ id, pic, latitude, longitude, address, juli, name }) => ({
					id,
					pic,
					latitude,
					longitude,
					address,
					juli,
					name,
					iconPath: pic, // 设置图标路径
					width: 14, // 设置图标宽度
					height: 14 // 设置图标高度
				}));
				that.markers = newArr;
			
			});
		}
	}
};
</script>

<style lang="scss">
.page-body {
	width: 100%;
}
.map {
	display: flex;
	width: 133rpx;
	height: 53rpx;
	background: #ffffff;
	box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(167, 167, 167, 0.3);
	border-radius: 27rpx;
	font-weight: 500;
	font-size: 27rpx;
	color: #3681f3;
	position: fixed;
	bottom: 500rpx;
	right: 13rpx;
	z-index: 99;
	text-align: center;
	line-height: 53rpx;
	// color: ;
}
.mapImg {
	width: 23rpx;
	height: 23rpx;
	margin: 15rpx 10rpx 0 25rpx;
}
.tu {
	position: fixed;
	top: 1000rpx;
	left: 27rpx;
	z-index: 99;
	display: flex;
	width: 697rpx;
	box-sizing: border-box;
	height: 200rpx;
	background: #ffffff;
	border-radius: 20rpx;
	padding: 20rpx;
}
.img {
	width: 133rpx;
	height: 160rpx;
	background: #3681f3;
	border-radius: 13rpx;
	margin-right: 18rpx;
}

.name {
	font-weight: bold;
	font-size: 29rpx;
	color: #333333;
}
.address {
	font-weight: 500;
	font-size: 21rpx;
	color: #666666;
	line-height: 32rpx;
	margin-top: 20rpx;
}
.distance {
	font-weight: 500;
	font-size: 21rpx;
	color: #999999;
	margin-top: 20rpx;
}
.rig {
	position: relative;
}
.nav {
	position: absolute;
	top: 100rpx;
	left: 380rpx;
	z-index: 999999999;
	width: 120rpx;
	height: 47rpx;
	background: #3681f3;
	border-radius: 23rpx;
	font-weight: 500;
	font-size: 24rpx;
	color: #ffffff;
	line-height: 47rpx;
	text-align: center;
	// margin-top: 10rpx;
	// margin-left: 350rpx;
}
</style>
